<template>
  <el-dialog
    title="新增点位"
    :visible="show"
    width="40%"
    :before-close="close"
  >
    <el-form label-width="80px" :model="form" :rules="formRules">
      <el-form-item label="点位名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入" maxlength="15" show-word-limit />
      </el-form-item>
      <el-form-item label="所在区域" prop="regionId">
        <el-select v-model="form.regionId" placeholder="请选择">
          <el-option v-for="item in locationList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属商圈" prop="businessId">
        <el-select v-model="form.businessId" placeholder="请选择">
          <el-option v-for="item in shoppingList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="归属合作商" prop="ownerId" label-width="100px">
        <el-select v-model="form.ownerId" placeholder="请选择">
          <el-option v-for="item in partnersList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="addr">
        <!-- <el-select v-model="form.addr" placeholder="请选择">
          <el-option label="quyu" value="sdfw" />
        </el-select> -->
        <el-cascader :options="options" />
      </el-form-item>
      <el-form-item prop="areaCode">
        <el-input v-model="form.areaCode" type="textarea" placeholder="请输入详细地址" maxlength="60" show-word-limit />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getPointApi, getShoppingApi, getPartnersApi } from '@/api'
export default {
  props: {
    show: {
      type: Boolean
    }
  },
  data() {
    return {
      form: {
      },
      formRules: {
        name: [
          { required: true, message: '请输入点位名称', trigger: 'blur' },
          { max: 15, message: '长度在 0 到 15 个字符', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '请选择所在区域', trigger: 'blur' }
        ],
        businessId: [
          { required: true, message: '请选择所在商圈', trigger: 'blur' }
        ],
        ownerId: [
          { required: true, message: '请选择归属合作商', trigger: 'blur' }
        ],
        addr: [
          { required: true, message: '请选择详细地址', trigger: 'blur' }
        ],
        areaCode: [{ required: true, message: '', trigger: 'blur' },
          { min: 3, max: 60, message: '长度在 3 到 60 个字符', trigger: 'blur' }
        ]
      },
      page: {
        pageIndex: '1',
        pageSize: '10'
      },
      locationList: [], // 所在区域
      shoppingList: [], // 所属商圈
      partnersList: [], // 合作商
      addressList: [], // 详细地址
      options: []
    }
  },
  async created() {
    const { currentPageRecords } = await getPointApi()
    this.locationList = currentPageRecords
    const res = await getShoppingApi()
    this.shoppingList = res
    const res1 = await getPartnersApi(this.page)
    this.partnersList = res1.currentPageRecords
    console.log(this.form)
  },
  methods: {
    close() {
      this.$emit('close')
    },
    submit() {
      this.$emit('submit', this.form)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner{
  width:100%
}
.el-select{
  width: 100%;
}
</style>
